<template>
  <div class="eqpBase-container">
    <!--工具栏-->
    <eHeader @doSearch="doSearch" />
    <!--表格渲染-->
    <div class="table-buttons">
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-plus"
        @click="switchHandle('add')"
      >{{ $t("add") }}</el-button
      >
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"
        @click="switchHandle('modify')"
      >{{ $t("modify") }}</el-button
      >
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="switchHandle('del')"
      >{{ $t("delete") }}</el-button
      >
      <!-- <el-button
          v-btnPermission:add
          type="primary"
          icon="el-icon-download"

          @click="switchHandle('download')"
        >{{ $t("downloadTemp") }}</el-button
        >
        <el-upload
          :action="baseApi + '/config/upload/submit?name=EqpBaseList'"
          :headers="headers"
          :show-file-list="false"
          :on-success="uploadSuccess"
          class="upload-btn"
          style="display: inline-block"
          accept=".xlsx"
          @on-error="importFail"
        >
          <el-button
            v-btnPermission:add
            type="primary"
            icon="el-icon-upload"

          >{{ $t("import") }}</el-button
          >
        </el-upload> -->
      <el-button
        type="primary"
        icon="el-icon-upload"
        @click="switchHandle('export')"
      >{{ $t("export") }}</el-button
      >
    </div>
    <!-- 主体部分 -->
    <el-card class="box-card" shadow="never">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 弹窗组件 -->
    <myDialog
      ref="myDialog"
      :title="title"
      :is-disabled="isDisabled"
      @closeDialog="closeDialog"
      @initList="initList"
    />
    <!-- 修改记录组件 -->
    <changeHistory ref="changeHistoryDialog" />
  </div>
</template>

<script>
import crudJob from '@/api/equipment/eqpbase'
import eHeader from './module/header'
import myDialog from './module/tabform'
import changeHistory from '../../components/changeHistory'
import mySetting from '@/mixins/mySetting'
import { clearNull } from '@/utils/myTools'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
  name: 'EqpBasePage',
  components: { eHeader, myDialog, changeHistory },
  mixins: [mySetting],
  // 数据字典
  data() {
    return {
      multipleSelection: [],
      UpdateDisabled: true,
      DeleteDisabled: true,
      title: '', // 弹窗标题
      form: {
        activeControl: 99
      },
      search: {},
      isDisabled: false, // 是否禁用表单内容
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: '序号', type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        // { prop: 'eqpType', label: this.$t('eqpType'), width: '120px' },
        { prop: 'eqpName', label: this.$t('eqpName'), width: '120px' },
        // { prop: 'eqpModel', label: this.$t('eqpModel'), width: '120px' },
        { prop: 'vendor', label: this.$t('eqpBrand'), width: '120px' },
        { prop: 'facility', label: this.$t('eqpfacility'), width: '120px' },

        // { prop: 'station', label: this.$t('station') },
        { prop: 'serialNo', label: this.$t('eqpserialNo'), width: '120px' },
        { prop: 'emGroup', label: this.$t('eqpemGroup'), width: '120px' },
        { prop: 'owenrId', label: this.$t('firstOwenrId'), width: '120px' },
        { prop: 'assetNo', label: this.$t('eqpassetNo'), width: '100px' },
        { prop: 'inTime', label: this.$t('eqpinTime') },
        { prop: 'createTime', label: this.$t('createTime') },
        { prop: '', label: this.$t('viewDetail'), fixed: 'right', width: '80px', templete: (_scope) => {
          return (
            <el-button type='text' size='small' onclick={() => this.scopedHandle(_scope.row)}>
              {this.$t('viewDetail')}</el-button>
          )
        } },
        { prop: '', label: this.$t('modifyHistory'), fixed: 'right', width: '80px', templete: (_scope) => {
          return (
            <el-button type='text' size='small'
              onclick={() => this.handleViewClick(_scope.row)}>
              {this.$t('modifyHistory')}</el-button>
          )
        } }

      ],

      tableLoading: true,
      headers: {
        Token: getToken()
      },
      job_status: [
        { key: 'true', display_name: '正常' },
        { key: 'false', display_name: '禁用' }
      ]
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  created() {
    this.initList()
  },
  methods: {
    switchHandle(val) {
      switch (val) {
        case 'add':
          this.handleClickAdd()
          break
        case 'del':
          this.handleDel()
          break
        case 'modify':
          this.modify()
          break
        case 'download':
          this.download()
          break
        case 'export':
          this.export()
          break
        default:
          break
      }
    },
    // 新增数据
    handleClickAdd() {
      this.title = this.$t('add')
      this.$refs.myDialog.openDialog()
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(async() => {
        const ids = this.multipleSelection.map((ele) => {
          return ele.id
        })
        const res = await crudJob.getTabList()
        if (res.data.includes('TMS')) {
          crudJob.doDeleteTabs({ ids }).then(code => {
            this.$betterTips(code)
            this.setOnePage()
            this.initList()
          })
        } else {
          crudJob.del({ ids: ids }).then(code => {
            this.$betterTips(code)
            this.setOnePage()
            this.initList()
          })
        }
      })
    },
    // 修改数据
    modify() {
      this.title = this.$t('modify')
      this.isDisabled = false
      this.$refs.myDialog.openDialog(this.multipleSelection[0])
    },
    // 切换分页
    getList(val) {
      this.options.loading = true
      this.listQuery = val
      this.initList()
    },
    // 初始化列表
    initList() {
      let obj = {
        ...this.listQuery,
        ...this.search
      }

      obj = clearNull(obj)
      crudJob.getList(obj).then((res) => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    // 点击查询
    doSearch(val) {
      this.search = val
      this.listQuery.page = 1
      this.initList()
    },
    // // 确认新增
    // doSave() {
    //   this.listQuery.page = 1
    //   this.initList()
    // },
    // 查看详情
    scopedHandle(row) {
      this.isDisabled = true
      this.title = this.$t('viewDetail')
      this.$refs.myDialog.openDialog(row)
    },
    handleViewClick(row) {
      this.$refs.changeHistoryDialog.openDialog('TMS_EQPS', row.id)
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 关闭弹窗清空数据
    closeDialog() {
      this.isDisabled = false
    },
    download() {
      crudJob.download({ name: 'EqpBaseList' }).then((res) => {
        window.location.href = this.baseApi + '/' + res.data
      })
    },
    uploadSuccess(response, file, fileList) {
      // 第{ele.index}行 {this.$t(ele.msgCode)}
      // 第{ele.split(',')[0]}行 {this.$t(ele.split(',')[1])}
      // this.netTips(response.code)
      if (response.code !== 1) {
        const h = this.$createElement
        const listVNode = response.data.map((item) => {
          return (
            <p style={ { width: '240px' }}>
              <span style={ { width: '100%', wordWrap: 'break-word' }}>{item.index ? `第{${item.index}}行` : ''}{this.$t(item.msgCode)}</span>
            </p>
          )
        })
        const styles = {
          color: 'teal',
          overflowX: 'hidden',
          overflowY: 'auto',
          width: '280px',
          maxHeight: 'calc(100vh - 120px)'
        }
        this.$notify({
          message: h('div', { style: styles }, listVNode),
          type: 'error',
          duration: 0
        })
        fileList = []
      } else {
        this.$betterTips(response)
      }
    },
    importFail() {
      this.$notify({
        message: this.$t('uploadFail'),
        type: 'error',
        duration: 3500
      })
    },
    export() {
      let obj = {
        ...this.listQuery,
        ...this.search
      }
      obj.toexcel = 1
      obj = clearNull(obj)
      crudJob.getList(obj).then((res) => {
        if (res.code === 1) {
          window.location.href = this.baseApi + '/' + res.data
        } else {
          this.doMerge(res)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.upload-btn{
  margin: 0 10px;
}
</style>

